<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="raphael.js"></script>
  <style>
    body{
      background:black;
    }
    #paper{
      width:800px;
      height:600px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform:translate(-50%,-50%);
    }
  </style>
  <script>
    function d2a(n){
      return n*Math.PI/180;
    }
    function randomColor(){
      // 调色
      let color=Math.floor(Math.random()*16777216).toString(16);
      while(color.length<6) color='0'+color;
      return `#${color}`;
    }
    window.onload=function(){
      let paper=Raphael('paper', 800, 600);
      let cx=400,cy=300;

      function createPath(r,ang,color){
        let path=paper.path();
        calc(ang,true);
        function calc(ang,isfirst=false){
          let x=cx+Math.sin(d2a(ang))*r;
          let y=cy-Math.cos(d2a(ang))*r;

          // 画图
          let arr=[];
          arr.push(`M ${cx} ${cy-r}`);
          arr.push(`A ${r} ${r} 0 ${ang>=180?1:0} 1 ${x} ${y}`);

          path.attr({'stroke-width':20,'stroke':color,'stroke-linejoin':'bevel'});
          if(isfirst){
            // 第一次直接显示，不做动画
            path.attr('path',arr.join(' '));
          }else{
            if(ang==0){
              // 角度等于0，不做动画过渡
              path.attr('path',arr.join(' '));
            }else{
              path.animate({'path':arr.join(' ')},500,'bounce');
            }
          }
        }
        path.calc=calc;
        return path;
      }

      function createText(h,m,s){
        let text=paper.text().attr({'font-size':40,'fill':'white'});
        content(h,m,s);
        function content(h,m,s){
          let time=`${h>9?h:'0'+h} : ${m>9?m:'0'+m} : ${s>9?s:'0'+s}`;

          text.attr({'text':time,'x':400,'y':300});
        }

        text.content=content;
        return text;
      }

      let paths=[];
      let curTime;
      function tick(){
        let date=new Date();
        let angH=(date.getHours()>12?date.getHours()-12:date.getHours())/12*360;
        let angM=date.getMinutes()/60*360;
        let angS=date.getSeconds()/60*360;
        if(paths.length==0){
          paths=[
            createPath(250,angH,'#8e8cd8'),
            createPath(200,angM,'#f7630c'),
            createPath(150,angS,'#d13438')
          ];
          curTime=createText(date.getHours(),date.getMinutes(),date.getSeconds());
        }else{
          paths[0].calc(angH);
          paths[1].calc(angM);
          paths[2].calc(angS);
          curTime.content(date.getHours(),date.getMinutes(),date.getSeconds());
        }
      }
      tick();
      setInterval(tick,1000);
    };
  </script>
</head>
<body>
  <div id="paper"></div>
</body>
</html>
